<template>
  <div id="recorddialog">
    <commonformdialog :isshowDialogs="isshowDialog" :isshowconfirmbtn="false" :dialogWidth="'25%'" :enterTitle="false"
      :isshowimportTitle="false" :dialogTitle="`发放练车券-${titlename}`" @closetextDialog="closetextDialog" @confirmbtn='confirmbtn'
>

      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-form-item label="选择机构" prop="team_id">
          <treeselect v-model="formData.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
            placeholder="请选择关联机构" />
        </el-form-item>
        <el-form-item label="选择教练" prop="coach_id">
          <el-select v-model="formData.coach_id" placeholder="如不选择则为机构下所有教练可用" :disabled="formData.team_id==null" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in newCoach" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择科目" prop="subject">
          <el-select v-model="formData.subject" placeholder="请选择选择科目" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in subOption" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用次数" prop="use_num">
          <el-input v-model="formData.use_num" type="number" min="1" placeholder="请输入次数" clearable :style="{width: '100%'}">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>

      </el-form>

    </commonformdialog>
  </div>
</template>

<script>
  //引入弹窗
  import commonformdialog from '@/components/commondialog/commondialog'
  //api
  import {
    getSessionStorage
  } from '@/utils/accessToken'
  import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
  import {
    studentHandoutticket
  } from '@/api/student'
  export default {
    data() {
      return {
        //是否禁用科目选项
        issubdisable: false,
        //标题名字
        titlename: '',
        //学员id
        studentId: '',
        treeOptions: [],
        newCoach: [],
        coachOption: [],
        //表格数据
        formData: {
          team_id: null,
          coach_id: '',
          subject: '',
          use_num:1
        },
        rules: {
          subject: [{
            required: true,
            message: '请选择选择科目',
            trigger: 'change'
          }],
          team_id: [{
            required: true,
            message: '请选择关联机构',
            trigger: 'change'
          }],
          use_num: [{
            required: true,
            message: '请输入次数',
            trigger: 'blur'
          }]
        },
        subOption: [{
          "label": "科目二",
          "value": 1,
        }, {
          "label": "科目三",
          "value": 2,

        }, {
          "label": "陪练/复训",
          "value": 3,

        }],
      }
    },
    components: {
      commonformdialog,
      Treeselect
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
      },
      //点击传递的参数
      dialogparams: {
        type: Object,
        default: () => {
          return {}
        }
      },

    },
    methods: {
      normalizer(node) {
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        }
      },
      //关闭弹窗
      closetextDialog() {
        this.$refs['elForm'].resetFields()
        this.$emit('closetextDialog')
      },
      //点击确认
      confirmbtn() {
        this.$refs['elForm'].validate(async valid => {
          if (!valid) return
          let params = {
            student_id: this.studentId,
            team_id: this.formData.team_id,
            coach_id: this.formData.coach_id,
            use_num: this.formData.use_num,
            subject: this.formData.subject
          }
          let data = await studentHandoutticket(params)
          if (data.code == '0000') {
            this.$message.success('发放成功！')
            this.$emit('confirm')
            this.$refs['elForm'].resetFields()
          }
        })
      }
    },
    mounted() {
      this.coachOption = getSessionStorage('Optionsall')['coach']
      this.$bus.on('getparams', async (val) => {
        //获取要编辑的id
        let params = val;
        this.studentId=val.id
        this.titlename = params.titlename;
        this.treeOptions = params.treeOptions;
      })
    },
    watch:{
      'formData.team_id':function(val){
        if(val){
          this.newCoach=this.coachOption.filter(p=>{
            return p.teamId==val
          })
        }

      }
    }
  }
</script>

<style scoped lang='scss'>
::v-deep{
  input[type=number] {
      -moz-appearance:textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
}
</style>
